<template>
    <div class="relation-wrapper">
        <Block>
            <DataGrid :auto-load="autoLoad" ref="dataGridRef">
                <template #toolbar-search>
                    <div class="query-from-box">
                        <el-form>
                            <el-form-item>
                                <el-select placeholder="绑定类型" v-model="queryData.bindType" clearable>
                                    <el-option
                                        v-for="(value, key) in BindType"
                                        :label="value"
                                        :key="key"
                                        :value="key"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="queryData.modelName" placeholder="模型名" clearable />
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="queryData.bindName" placeholder="属性/事件/行为名称" clearable />
                            </el-form-item>
                            <el-form-item>
                                <el-select placeholder="属性操作类型" v-model="queryData.method" clearable>
                                    <el-option v-for="(value, key) in Method" :label="value" :key="key" :value="key" />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="queryData.bindName" placeholder="命令名称" clearable />
                            </el-form-item>
                        </el-form>
                    </div>
                </template>
                <el-table-column type="index" label="序号" width="60" align="center" fixed />
                <el-table-column label="绑定类型" fixed show-overflow-tooltip>
                    <template #default="{ row }">
                        {{ BindType[row.bindType] }}
                    </template>
                </el-table-column>
                <el-table-column prop="modelName" label="模型名称" show-overflow-tooltip />
                <el-table-column prop="bindName" label="属性/事件/行为名称" show-overflow-tooltip />
                <el-table-column prop="method" label="属性操作类型" show-overflow-tooltip>
                    <template #default="{ row }">
                        {{ Method[row.method] || '--' }}
                    </template>
                </el-table-column>
                <el-table-column prop="commandDescription" label="对应命令" show-overflow-tooltip />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" link @click="onViewItem(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </DataGrid>
        </Block>
    </div>
</template>
<script setup lang="ts">
import { IoTProtocolService } from '@great/services';
import { DataGrid, Block, type DataGridInstance } from '@great/components';
import { showPopupBox } from '@great/utils';
import ViewModal from './ViewModal.vue';

const protocolDetail = inject<any>('protocolDetail').value;

enum BindType {
    attribute = '属性',
    action = '行为',
    event = '事件'
}
enum Method {
    read = '读',
    write = '写'
}

// 查询条件
const queryData = ref({
    bindType: '',
    modelName: '',
    bindName: '',
    method: ''
});
const dataGridRef = useTemplateRef<DataGridInstance>('dataGridRef');
const autoLoad = reactive({
    debounce: true,
    reloadDeps: [queryData],
    onLoad: async (current, size) => {
        const res = await IoTProtocolService.getRelationPage(
            {
                current,
                size,
                ...queryData.value
            },
            protocolDetail.protocolPublic.protocolNo
        );
        return { data: res.data.records, total: res.data.total };
    }
});

// 查看详情
const onViewItem = (row: any) => {
    showPopupBox(ViewModal, {
        row: row
    });
};
</script>

<style scoped lang="scss">
.relation-wrapper {
    .query-from-box {
        display: flex;
        align-items: center;
        .el-form {
            display: flex;
            .el-form-item {
                margin-bottom: 0;
                width: 192px;
            }
            .el-form-item + .el-form-item {
                margin-left: 10px;
            }
        }
    }
}
</style>
